<template>
  <div class="my-msg" v-if="!getIsPhone">
    <div class="pickers border-bottom">
      <tab-switches :activeTabIndex="activeTabIndex" @click="updateTabIndex"></tab-switches>
      <dropdown-picker 
        class="dropdown-picker-adjust"
        :selectedContent="selectedTime"
        :iconClass="'iconsx_riqi'"
        :showSelections="showTimepicker"
        @close="foldTimepicker"
        @click="unfoldTimepicker"
        >
      </dropdown-picker>
      
    </div>
    <div class="msgs">
      <msg-item v-for="message in currentMessages" :key="message.id" :message="message"></msg-item>
    </div>
  </div>
  <div class="my-msg" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text">
            消息
          </span>
        </div>
      </template>
      <template v-slot:right>
        <input-search></input-search>
      </template>
    </header-template-phone>
    <div class="tab-wrapper">
      <tab-switches :activeTabIndex="activeTabIndex" @click="updateTabIndex"></tab-switches>
      <time-picker @click="updateSelectedTime"></time-picker>
    </div>
    <div class="main">
      <selected-time :time="selectedTime"></selected-time>
      <div clsss="msgs">
        <msg-item 
          v-for="message in currentMessages" 
          :key="message.id" :message="message"
          @delete-item="handleDelete"
          >
        </msg-item>
      </div>
    </div>
  </div>
</template>

<script>
import TabSwitches from './tab-switches'
import MsgItem from './msg-item'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import InputSearch from '@/components/input-search/input-search'
import TimePicker from '@/components/time-picker/time-picker'
import SelectedTime from '@/components/base/selected-time/selected-time'
import DropdownPicker from '@/components/base/dropdown-picker/dropdown-picker'

import { mapGetters } from 'vuex' 
export default {
  components: {
    TabSwitches,
    MsgItem,
    HeaderTemplatePhone,
    DropdownPicker,
    HeaderBack,
    InputSearch,
    TimePicker,
    SelectedTime
  },
  data() {
    return {
      recentDays: [
        {
          id: 1,
          dayName: '今天',
          parameter: 0
        },
        {
          id: 2,
          dayName: '昨天',
          parameter: 1
        },
        {
          id: 3,
          dayName: '近3天',
          parameter: 3
        },
        {
          id: 4,
          dayName: '近5天',
          parameter: 5
        },
      ],
      messages: [
        {
          id: 1,
          from: 'system',
          username: '系统公告',
          postDate: new Date().getTime() - 10 * 3600,
          content: '<p>这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,这是系统公告,</p>'
        },
        {
          id: 2,
          from: 'user',
          username: 'admin',
          postDate: new Date().getTime() - 10 * 3600,
          content: '<p>这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息这是管理员信息</p>'
        },
        {
          id: 3,
          from: 'system',
          username: '系统公告',
          postDate: new Date().getTime() - 10 * 3600,
          content: '<p>这是系统公告2</p>'
        },
      ],
      activeDayIndex: 0,
      activeTabIndex: 0,
      selectedTime: '今天',
      showTimepicker: false 
    }
  },
  methods: {
    pickRecentDay(index, parameter) {
      this.activeDayIndex  = index
    },
    updateTabIndex(index) {
      this.activeTabIndex = index 
    },
    _filter() {
      let arr = []
      this.messages.forEach(item => {
        if (item.from == 'system') {
          arr.push(item)
        }
      })   
      return arr
    },
    handleDelete(id) {
      this.messages.some((message, index) => {
        if (message.id == id) {
          this.messages.splice(1, index)
          return true
        }
        return false
      })
    },
    updateSelectedTime(time) {
      this.selectedTime = time 
    },
    unfoldTimepicker() {
      this.showTimepicker = true
    },
    foldTimepicker() {
      this.showTimepicker = false 
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    currentMessages() {
      if (this.activeTabIndex == 0) {
        return this.messages
      } else if (this.activeTabIndex == 1) {
        return this._filter()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px)
  .my-msg 
    // margin-top 10px
    .pickers 
      display flex
      align-items flex-end
      box-sizing border-box 
      padding-left 20px
      height 48px
      .dropdown-picker-adjust
        margin 0 20px
      .recent 
        display flex 
        .day 
          padding 0 10px
          font-size 15px 
          font-weight 700
          &.active 
            color $color-theme-red 
    .msgs 
      background $color-text-button
@media screen and (max-width 750px) 
  .tab-wrapper 
    height 40px 
    display flex 
    align-items center
    justify-content space-between
    background #fff
    position fixed 
    top 48px
    left 0
    right 0
    padding-left 10px
    
  .main
    box-sizing border-box 
    padding 0 10px  
    padding-top 88px
    
    // .msgs 
    //   padding 0 10px 
    //   box-sizing border-box 
</style>